<template>
  <div>
    <svg width="100" height="100">
      <circle id="circle1" cx="50" cy="50" r="50" fill="orange"></circle>
    </svg>
    <hr>
    <svg width="100" height="100" viewBox="50 50 50 50">
      <circle id="circle2" cx="50" cy="50" r="50" fill="orange"></circle>
    </svg>
    <hr>
    <svg width="200" height="200">
      <circle class="" cx="10" cy="10" r="10" fill="skyblue"></circle>
      <circle class="purple" cx="110" cy="110" r="25"></circle>
      <circle class="brow" cx="80" cy="90" r="30"></circle>
    </svg>
    <h2>线</h2>
    <svg width="400" height="400">
      <line x1="50" y1="50" x2="350" y2="350" class="line1"></line>
      <polyline points="0,400 30,80 100,120 400,0" fill="none" class="line1"></polyline>
    </svg>
    <h2>矩形</h2>
    <svg width="400" height="400">
      <rect x="50" y="50" width="60" height="120" fill="deeppink"></rect>
    </svg>
    <h2>椭圆</h2>
    <svg width="200" height="200">
      <ellipse cx="50" cy="60" rx="20" ry="60" fill="yellow"></ellipse>
    </svg>
    <h2>多边形</h2>
    <svg width="200" height="200">
      <polygon points="0, 100 200,100 100,0 0,0" fill="red"></polygon>
    </svg>
    <h2>path use</h2>
    <svg width="400" height="400">
      <path id="path1" d="M 0,400 L50,350 L120,250 L220,0 L400,400 " class="path"></path>
      <text id="text1" x="120" y="360" fill="purple">path绘制</text>
      <!-- use的坐标是基于被复制对象的 -->
      <use href="#path1" x="0" y="100"></use>
      <use href="#text1" x="100" y="0"></use>
    </svg>
    <h2>动画</h2>
    <svg width="500" height="500">
      <rect x="0" y="0" width="200" height="20" fill="orange">
        <animate attributeName="width" from="0" to="500" dur="4s" repeatCount="indefinite"></animate>
        <animate attributeName="fill" from="#F86934" to="#39A7F2" dur="4s" repeatCount="indefinite"></animate>
      </rect>

      <rect x="0" y="100" width="50" height="50" fill="skyblue">
        <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s"
        from="0 50 50" to="360 350 350" repeatCount="indefinite"></animateTransform>
      </rect>
    </svg>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.purple{
  fill: purple;
}
.brow{
  fill: brown;
  stroke: black;
  stroke-width: 3px;
}
.line1{
  stroke-width: 5px;
  stroke: cadetblue;
}
.path{
  stroke: cornflowerblue;
  stroke-width: 5px;
  fill: none;
}
</style>